﻿@{
    Layout = null;
    ViewData["Title"] = "Login";
}
<script src="~/js/vue.js"></script>
<script src="~/js/axios.js"></script>
<script src="~/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="~/element-ui/lib/theme-chalk/index.css" />
<div id="elDiv">
    <div class="login-page">
        <div class="tyGif"></div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span class="login-title">🔐人力资源管理系统</span>
            </div>
            <div class="login-form">
                <el-form :model="form" :rules="loginRules" ref="loginForm">
                    <el-form-item prop="userName">
                        <el-input type="text" v-model="form.uname" auto-complete="off" placeholder="请输入用户名">
                            <template slot="prepend"><i style="font-size:20px" class="el-icon-user"></i></template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="passWord">
                        <el-input type="password" v-model="form.upassword" auto-complete="off" placeholder="请输入密码">
                            <template slot="prepend"><i style="font-size:20px" class="el-icon-key"></i></template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="width:100%;" type="warning" v-on:click="handleLogin" :loading="loading">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</div>



<script type="text/javascript">
    var vue = new Vue({
        el: "#elDiv",
        name: 'Login',
        data: {
            loading: false,
            form: {
                uname: '王经理',
                upassword: 'ddd'
            },
            loginRules: {
                uname: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                upassword: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ]
            }
        },
        methods: {
            handleLogin() {
                this.$refs.loginForm.validate().then(() => {
                    axios.post('/Home/Login', { u_name: this.form.uname, u_password: this.form.upassword }).then(res => {
                        if (res.data != null) {
                            //将当前登录成功的用户放到JQuery的session中
                            sessionStorage.setItem("userName", res.data.u_name);
                            sessionStorage.setItem("rid", res.data.rid);
                            console.info("rid:" + res.data.rid);
                            this.openmessuc("登录成功！欢迎" + res.data.u_name);
                            clearTimeout(this.timer);  //清除延迟执行
                            this.timer = setTimeout(() => {
                                window.location.href = '@Url.Action("HomePage")';
                            }, 500);//设置延时执行跳转页面
                        } else {
                            this.openmeswar("用户名或密码输入有误，请重新输入！");
                            this.form.uname = "";
                            this.form.upassword = "";
                        }
                    });
                }).catch((error => {
                    this.openmeswar("输入错误！" + error);
                }))
            },
            openmessuc: function(mes) {
                this.$message({
                    message: mes,
                    type: 'success'
                });
            },
            openmeswar: function(mes) {
                this.$message({
                    message: mes,
                    type: 'warning'
                });
            },
        },
    })
</script>

<style scoped>
    .login-page {
        background-image: linear-gradient(180deg, #f5ab00 0%, #9c9000 100%);
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .login-title {
        font-size: 20px;
    }

    .box-card {
        width: 375px;
    }

    .tyGif {
        width: 790px;
        height: 765px;
        /*border: 1px solid red;*/
        background: url("/images/taiyang.gif") no-repeat;
    }

</style>